<template>
  <el-card>
    <h3>已审批工作</h3>
    <div class="button-group">
      <el-button
        :type="statusFilter === 'approved' ? 'primary' : 'default'"
        @click="changeStatusFilter('approved')"
      >
        通过
      </el-button>
      <el-button
        :type="statusFilter === 'rejected' ? 'primary' : 'default'"
        @click="changeStatusFilter('rejected')"
      >
        驳回
      </el-button>
    </div>

    <el-table :data="paginatedWorks" border>
      <el-table-column prop="username" label="员工姓名" width="120"></el-table-column>
      <el-table-column prop="content" label="工作内容"></el-table-column>
      <el-table-column prop="status" label="审批状态">
        <template #default="{ row }">
          <el-tag :type="row.status === 'approved' ? 'success' : 'danger'">
            {{ row.status === 'approved' ? '通过' : '驳回' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="comment" label="审批意见"></el-table-column>
      <el-table-column prop="updatedAt" label="审批时间" width="160">
        <template #default="{ row }">
          {{ row.updatedAt ? formatDate(row.updatedAt) : '未知时间' }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="filteredApprovedWorks.length"
    ></el-pagination>
  </el-card>
</template>

<script setup>
import { ref, onMounted, defineExpose, computed, watch } from 'vue'
import { getWorkContents } from '@/api/workcontent.js'
import { ElMessage } from 'element-plus'

const approvedWorks = ref([]) // 存储审批数据
const statusFilter = ref('approved') // 默认筛选通过的工作内容
const currentPage = ref(1) // 当前页码
const pageSize = ref(10) // 每页显示数量

// **获取已审批的工作内容**
const fetchApprovedWorks = async () => {
  try {
    const departmentId = localStorage.getItem('departmentId')
    if (!departmentId) {
      ElMessage.error('无法获取部门信息，请重新登录')
      return
    }

    const response = await getWorkContents({ departmentId })
    if (response.data.code === 200) {
      approvedWorks.value = response.data.data.filter(item => item.status === 'approved' || item.status === 'rejected')
    } else {
      ElMessage.error(response.data.message || '获取数据失败')
    }

    currentPage.value = 1 // 重置到第一页
  } catch (error) {
    console.error('加载失败:', error)
    ElMessage.error('加载失败，请重试')
  }
}

// **筛选审批数据**
const filteredApprovedWorks = computed(() => {
  return approvedWorks.value.filter(item => item.status === statusFilter.value)
})

// **分页数据**
const paginatedWorks = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredApprovedWorks.value.slice(start, end)
})

// **日期格式化**
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString()
}

// **改变筛选条件并重新获取数据**
const changeStatusFilter = (status) => {
  if (statusFilter.value !== status) {
    statusFilter.value = status
    currentPage.value = 1 // 切换状态时重置到第一页
  }
}

// **分页处理**
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}

// **组件挂载时获取数据**
onMounted(fetchApprovedWorks)

// **监听筛选条件变化，重新拉取数据**
watch(statusFilter, fetchApprovedWorks)

// **暴露刷新函数**
defineExpose({ fetchApprovedWorks })
</script>

<style scoped>
.button-group {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
